import type {
  ReactNode,
} from 'react'
import type { NativeProps } from '../../utils/native-props'

export type SpaceProps = {
  /** crossed-axis 对齐方式. default: - */
  align?: 'start' | 'end' | 'center' | 'baseline'
  /** 是否渲染为块级元素. default: `false` */
  block?: boolean
  /** 布局方向. default: `horizontal` */
  direction?: 'horizontal' | 'vertical'
  /** main-axis 对齐方式. default: - */
  justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | 'stretch'
  /** 点击事件. default: - */
  onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
  /** 是否自动换行 仅在 `direction === 'horizontal'` 时有效. default: `fasle` */
  wrap?: boolean
  /** children */
  children?: ReactNode
} & NativeProps<
  /** 间距大小. default: '8px' */
  | '--gap'
  /** 水平方向间距大小. default: 'var(--gap)' */
  | '--gap-horizontal'
  /** 垂直方向的间距大小. default: 'var(--gap)' */
  | '--gap-vertical'
>
